<template>
  <div>
    <a-modal
      :visible="visible"
      :title='title'
      :maskClosable="false"
      :keyboard="false"
      :confirm-loading="confirmLoading"
      width="650px"
      @cancel="() => { $emit('cancel') }"
      @ok="() => { $emit('create') }"
    >
      <a-form :form="form">
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-item label="用户名" :colon="false" :label-col="{span: 6}" :wrapper-col="{span: 18}">
              <a-input
                :disabled="inputDisabled"
                v-decorator="[
            'account',
            { initialValue: '', rules: [{type: 'string', required: true, message: '请输入用户名(工号)' }] },
          ]"
                placeholder="请输入用户名(工号)"
              >
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="真实姓名" :colon="false" :label-col="{span: 6}" :wrapper-col="{span: 18}" :required="false">
              <a-input
                placeholder="请输入真实姓名"
              >
              </a-input>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-item label="手机号" :colon="false" :label-col="{span: 6}" :wrapper-col="{span: 18}" :required="false">
              <a-input
                placeholder="请输入手机号"
              >
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="电子信箱" :colon="false" :label-col="{span: 6}" :wrapper-col="{span: 18}" :required="false">
              <a-input
                placeholder="请输入电子信箱"
              >
              </a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-item label="密码" :colon="false" :label-col="{span: 6}" :wrapper-col="{span: 18}">
              <a-input-password
                v-decorator="[
            'password',
            { initialValue: '', rules: [{type: 'string',  required: true, message: '请输入密码' }]
            }]"
                placeholder="请输入密码"
              >
              </a-input-password>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="确认密码" :colon="false" :label-col="{span: 6}" :wrapper-col="{span: 18}">
              <a-input-password
                v-decorator="[
            'qrPassword',
            { initialValue: '', rules: [{type: 'string',  required: true, message: '请输入确认密码' }]
            }]"
                placeholder="请输入确认密码"
              >
              </a-input-password>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-item label="权限组" :colon="false" :label-col="{span: 6}" :wrapper-col="{span: 18}" required>
              <a-select
                v-decorator="[
                    'authorityId',
                    { initialValue: 1,rules: [{ required: true, message: '请选择权限组' }] },
                  ]"
                placeholder="请选择权限组"
              >
                <a-select-option :key="item.id" v-for="item in authorityS" :value="item.id">
                  {{item.name}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="备注" :colon="false" :label-col="{span: 6}" :wrapper-col="{span: 18}" :required="false">
              <a-input
                placeholder="请输入备注"
              >
              </a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script>

import adminDefinitionApi from '@/api/adminDefinition'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '新增'
    },
    confirmLoading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      inputDisabled: false,
      authorityID: '',
      authorityS: [
      ]
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, { name: 'form_in_modal' })
  },
  beforeMount () {
    this.getRoleList()
  },
  methods: {
    // 获取车辆类型
    async getRoleList () {
      let resp = await adminDefinitionApi.getRoleList()
      // console.log(resp);
      if (resp.data.success) {
        // console.log(resp.data.result)
        this.authorityS = resp.data.result
      } else {
        this.$message.error(resp.data.message)
      }
    },
    // 重置表单默认值
    initFormValue () {
      this.form.setFieldsValue({
        account: '',
        name: '',
        phone: '',
        email: '',
        password: '',
        qrPassword: '',
        authorityId: '',
        bz: ''
      })
    },
    // 填充弹窗
    stuffDilog (item, disabled) {
      console.log(item)
      if (item) {
        this.form.setFieldsValue({
          account: item.account,
          name: item.name,
          phone: item.phone,
          email: item.email,
          password: item.password,
          qrPassword: item.password,
          authorityId: item.authorityId,
          bz: item.bz
        })
      }
      this.inputDisabled = disabled
    }
  }

}
</script>

<style scoped>

</style>
